<template>
	<view>
		<view class="g-goBack" @click="$utils.toBack()">
			<view class="cuIcon-back"></view>
		</view>
		<view class="headBar">
			<view class="search">
				<input type="text" placeholder="搜索设备编号" v-model="keyword">
				<view class="btn" @click="btnSearch">搜索</view>
			</view>
			<view class="tabBar">
				<view class="item">在线状态：</view>
				<view :class="'item '+(tabBarIndex==0?'cur':'')" @click="btnTabChange(0)">不限制</view>
				<view :class="'item '+(tabBarIndex==1?'cur':'')" @click="btnTabChange(1)">离线</view>
				<view :class="'item '+(tabBarIndex==2?'cur':'')" @click="btnTabChange(2)">在线</view>
			</view>
			<view class="tabBar">
				<view class="item">部署状态：</view>
				<view :class="'item '+(tabDepIndex==0?'cur':'')" @click="btnDepChange(0)">不限制</view>
				<view :class="'item '+(tabDepIndex==1?'cur':'')" @click="btnDepChange(1)">未部署</view>
				<view :class="'item '+(tabDepIndex==2?'cur':'')" @click="btnDepChange(2)">已部署</view>
			</view>
		</view>
		<view class="Lists">
			<block v-for="(item,index) in listArray" :key="index">
				<view class="item" @click="toDeviceInfo(item)">
					<view class="no">{{item.deviceSn||'-'}}</view>
					<view class="add">
						<text>设备类型：{{item.deviceTypeName||'-'}}</text>
						<text class="margin-left"></text>
						<text class="cuIcon-lightfill text-my">10口</text>
					</view>
					<view class="label" v-if="item.placeName">
						<text>部署网点：{{item.placeName}}</text>
						<text style="font-size: 20rpx;color: #999;">{{item.placeAreaName}}</text>
					</view>
					<view class="label text-red" v-else>未部署</view>
					<view class="online" v-if="item.state==2">在线</view>
					<view class="online off" v-else>离线</view>
				</view>
			</block>
		</view>
		<view class="foot" v-if="listArray==0"><text class="ftxt">暂无数据</text></view>
		<view class="foot" v-else><text class="ftxt">我也是有底线的</text></view>
		<view style="height: 100rpx;"></view>
 		<view class="footBar">
 			<view class="button" @click="btnRefresh">刷新数据</view>
 		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listArray:[],//全部设备
				page:1,
				keyword:"",
				footShow:true,
				tabBarIndex:0,   	//在线离线
				tabDepIndex:0,  	//部署状态
			}
		},
		onLoad(option) {
			console.log(option)
			if(option.dev){
				this.keyword = option.dev;
			}
			this.getList();
		},
		onReachBottom() {
			if(!this.footShow)return;
			this.getList();
		},
		methods: {
			//tab栏 1
			btnTabChange(index){
				this.tabBarIndex = index;
				this.listArray=[];
				this.page=1;
				this.keyword = "";
				this.footShow = false;
				this.getList();
			},
			//tab栏 2
			btnDepChange(index){
				this.tabDepIndex = index;
				this.listArray=[];
				this.page=1;
				this.keyword = "";
				this.footShow = false;
				this.getList();
			},
			btnSearch(){
				this.listArray=[];
				this.page=1;
				this.footShow = false;
				this.getList();
			},
			//刷新
			btnRefresh(){
				this.listArray=[];
				this.page=1;
				this.keyword = "";
				this.footShow = false;
				this.getList();
			},
			getList(){
				const api = this.$request;
				const self = this;
				api.post(api.url.bxscnDevList,{
					trim:self.keyword,
					state:self.tabBarIndex,
					deployState:self.tabDepIndex,
					pageNo:self.page
				},(res)=>{
					console.log(res)
					if(res.code==200){
						const arr = res.body.items || [];
						self.listArray = self.listArray.concat(arr);
						self.page = self.page+1;
					}else{
						self.footShow = false;
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			toDeviceInfo:function(item){
				uni.navigateTo({
					url:'./info?id='+item.deviceSn
				});
			}
		}
	}
</script>

<style lang="less">
	.headBar{
		background-color: white;
		padding: 20rpx 0 0;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 200;
		width: 100%;
		box-shadow: 0 0 10rpx #e0e0e0;
		.search{
			width: 80%;
			height: 60rpx;
			margin: 0 auto;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 20rpx;
			overflow: hidden;
			font-size: 24rpx;
			input{
				font-size: 24rpx;
				width: 85%;
				height: 100%;
				background-color: #f8f8f8;
				padding-left: 20rpx;
			}
			.btn{
				width: 15%;
				height: 100%;
				background-color: #c0c0c0;
				color: white;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.tabBar{
			margin-top: 20rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.item{
				flex: 2;
				text-align: center;
				padding:10rpx 10rpx 12rpx;
				border-bottom: 4rpx solid transparent;
				color: #999999;
				&.cur{
					font-weight: 600;
					color: #e29751;
					border-bottom: 4rpx solid #e29751;
				}
			}
		}
		.pickerBar{
			margin-top: 28rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 28rpx;
			.icon{
				font-size: 32rpx;
			}
		}
	}
	.Lists{
		padding-top: 250rpx;
		.item{
			background-color: white;
			margin-top: 20rpx;
			padding: 30rpx 40rpx;
			position: relative;
			.no{
				font-size: 30rpx;
				font-weight: 600;
				margin-bottom: 10rpx;
			}
			.no,.add{
				width: 80%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.label{
				margin-top: 10rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.online{
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				color: #64be49;
				font-weight: 600;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				&::before{
					content: "";
					display: block;
					width: 10rpx;
					height: 10rpx;
					background-color: #64be49;
					box-shadow: 0 0 20rpx #64be49;
					border-radius: 50%;
					margin-right: 10rpx;
				}
				&.off{
					color: #c0c0c0;
					&::before{
						background-color: #c0c0c0;
						box-shadow: 0 0 20rpx #c0c0c0;
					}
				}
			}
			.putIn{
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 40rpx;
				&.button{
					background:linear-gradient(90deg,#f4b349,#ec7136);
					color: white;
					text-align: center;
					padding: 20rpx 30rpx;
					border-radius: 10rpx;
				}
			}
		}
	}
	.footBar{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding:20rpx 20rpx 40rpx;
		background-color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 0 10rpx #e0e0e0;
		.button{
			color: white;
			background:linear-gradient(#e7854d,#eca768);
			border:1rpx solid #e6b484;
			width: 240rpx;
			height: 68rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 10rpx;
			border-radius: 10rpx;
		}
	}
</style>